<template>
  <div class="wrap">
    <p class="font18 color333 mb30">事件选择</p>
    <!-- 事件选择 -->
    <el-form  :model="ruleForm" size="mini" ref="ruleForm" class="mb60">
      <!-- 事件类型 -->
      <el-form-item prop="eventType" class="mb30">
        <span class="font16 color333 ml10">事件类型：</span>
        <span class="font16 color333">{{getEventTypeName(ruleForm.eventType)}}</span>
      </el-form-item>

      <!-- 具体事件 -->
      <el-form-item prop="eventCode" class="mb30">
        <span class="font16 color333 ml40">事件：</span>
        <span class="font16 color333">{{getEventName(ruleForm.eventCode)}}</span>
      </el-form-item>
      
      <!-- 会员事件---升级事件部分 -->
      <div class="form-wrap" v-if="ruleForm.eventType == 1 && ruleForm.eventCode == 'member_upgrade'">
        <span class="lebel">
          <span class="redColor">*</span>
          <span class="color333">事件条件：</span>
        </span>
        <div class="form">
          <el-form :model="item" size="mini" ref="itemFrom" class="mb60 commonForm" v-for="(item,index) in formDataList" :key="index">
            <i v-if="index != 0" class="el-icon-close delete" @click=deleteForm(item)></i>
            <el-row class="mb20">
              <el-form-item :label="'事件条件' + (index + 1) + '：'" prop="eventName"  class="special" label-width="120px">
                <span class="color333 font16">{{item.eventName}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="时间条件：" prop="eventRangeTime"  class="special" label-width="120px">
                <span class="color333 font16" v-if="item.eventRangeTime">{{getEventRangeTime(item.eventRangeTime)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="升级级数：" prop="memberNum"  class="special" label-width="120px">
                <span class="color333 font16">{{getMemberNum(item.memberNum)}}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>

      <!-- 会员事件---降级事件部分 -->
      <div class="form-wrap" v-if="ruleForm.eventType == 1 && ruleForm.eventCode == 'member_downgrade'">
        <span class="lebel">
          <span class="redColor">*</span>
          <span class="color333">事件条件：</span>
        </span>
        <div class="form">
          <el-form :model="item" size="mini" ref="itemFrom" class="mb60 commonForm" v-for="(item,index) in formDataList" :key="index" >
            <i v-if="index != 0" class="el-icon-close delete" @click=deleteForm(item)></i>
            <el-row class="mb20">
              <el-form-item :label="'事件条件' + (index + 1) + '：'" prop="eventName" class="special" label-width="120px">
                <span class="color333 font16">{{item.eventName}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="时间条件：" prop="eventRangeTime" class="special" label-width="120px">
                <span class="color333 font16"  v-if="item.eventRangeTime">{{getEventRangeTime(item.eventRangeTime)}}</span>

              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="降级级数：" prop="memberNum" class="special" label-width="120px">
                <span class="color333 font16">{{getMemberNum(item.memberNum)}}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>
        


      <!-- 消费事件---优惠券核销部分 -->
      <div class="form-wrap"  v-if="ruleForm.eventType == 2 && ruleForm.eventCode == 'coupons_verification'">
        <span class="lebel">
          <span class="redColor">*</span>
          <span class="value color333">事件条件：</span>
        </span>
        <div class="form">

          <el-form :model="item" size="mini" ref="itemFrom" class="mb60 commonForm" v-for="(item,index) in formDataList" :key="index" >
            <i v-if="index != 0" class="el-icon-close delete" @click=deleteForm(item)></i>
            <el-row class="mb20">
              <el-form-item :label="'事件条件' + (index + 1) + '：'" prop="eventName" class="special" label-width="120px">
                <span class="color333 font16">{{item.eventName}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="时间条件：" prop="eventRangeTime" class="special" label-width="120px">
                <span v-if="item.eventRangeTime" class="color333 font16">{{getEventRangeTime(item.eventRangeTime)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="优惠券活动：" prop="promName" class="special"  label-width="120px">
                <span class="color333 font16">{{getPromName(item.promCode)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="核销渠道：" prop="verificationChannels" class="special" label-width="120px">
                <span class="color333 font16">{{getVerificationChannels(item.verificationChannels)}}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>


      <!-- 消费事件---红包核销部分 -->
      <div class="form-wrap"  v-if="ruleForm.eventType == 2 && ruleForm.eventCode == 'redEnvelope_verification'">
        <span class="lebel">
          <span class="redColor">*</span>
          <span class="value color333">事件条件：</span>
        </span>
        <div class="form">
          <el-form :model="item" size="mini" ref="itemFrom" class="mb60 commonForm" v-for="(item,index) in formDataList" :key="index" >
            <i v-if="index != 0" class="el-icon-close delete" @click=deleteForm(item)></i>
            <el-row class="mb20">
              <el-form-item :label="'事件条件' + (index + 1) + '：'" prop="eventName"  class="special" label-width="120px">
                <span class="color333 font16">{{item.eventName}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="时间条件：" prop="eventRangeTime" class="special" label-width="120px">
                <span v-if="item.eventRangeTime" class="color333 font16">{{getEventRangeTime(item.eventRangeTime)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="红包活动：" prop="promName"  class="special" label-width="120px">
                <span class="color333 font16">{{item.promName}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="核销渠道：" prop="verificationChannels" class="special" label-width="120px">
                <span class="color333 font16">{{getVerificationChannels(item.verificationChannels)}}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>

      <!-- 消费事件---积分兑换 -->
      <div class="form-wrap" v-if="ruleForm.eventType == 2 && ruleForm.eventCode == 'points_exchange'">
        <span class="lebel">
          <span class="redColor">*</span>
          <span class="value color333">事件条件：</span>
        </span>
        <div class="form">
          <el-form :model="item" size="mini" ref="itemFrom" class="mb60 commonForm" v-for="(item,index) in formDataList" :key="index" >
            <i v-if="index != 0" class="el-icon-close delete" @click=deleteForm(item)></i>
            <el-row class="mb20">
              <el-form-item :label="'事件条件' + (index + 1) + '：'" prop="eventName"  class="special" label-width="120px">
                <span class="color333 font16">{{item.eventName}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="时间条件：" prop="eventRangeTime"  class="special" label-width="120px">
                <span class="color333 font16" v-if="item.eventRangeTime">{{getEventRangeTime(item.eventRangeTime)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="积分兑换内容：" prop="pointsExchangeContent"  class="special" label-width="120px">
                <span class="color333 font16">{{getPointsExchangeContent(item.pointsExchangeContent)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="积分兑换次数：" prop="pointsExchangeNum"  class="special" label-width="120px">
                <span class="color333 font16">{{item.pointsExchangeNum}}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>

      <!-- 消费事件---积分抵现 -->
      <div class="form-wrap" v-if="ruleForm.eventType == 2 && ruleForm.eventCode == 'points_cash_in'">
        <span class="lebel">
          <span class="redColor">*</span>
          <span class="value color333">事件条件：</span>
        </span>
        <div class="form">
          <el-form :model="item" size="mini" ref="itemFrom" class="mb60 commonForm" v-for="(item,index) in formDataList" :key="index" >
            <i v-if="index != 0" class="el-icon-close delete" @click=deleteForm(item)></i>
            <el-row class="mb20">
              <el-form-item :label="'事件条件' + (index + 1) + '：'" prop="eventName" class="special" label-width="120px">
                  <span class="color333 font16">{{item.eventName}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="时间条件：" prop="eventRangeTime" class="special" label-width="120px">
                <span class="color333 font16" v-if="item.eventRangeTime">{{getEventRangeTime(item.eventRangeTime)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="积分抵现金额：" class="special" label-width="120px">
                <el-form-item  prop="pointsCashInAmount.s">
                  <span class="color333 font16">{{item.pointsCashInAmount.f}}</span>
                </el-form-item>
                <el-form-item  label="元-" style="width: 20px; margin: 0px 20px 0px -20px"></el-form-item>
                <el-form-item  prop="pointsCashInAmount.f">
                  <div style="margin: 10px 0px 0px;">{{item.pointsCashInAmount.s}}</div>
                </el-form-item>
                <el-form-item  label="元" style="width: 20px; margin: 0px 20px 0px -20px"></el-form-item>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="积分抵现次数：" prop="pointsCashInNum" class="special" label-width="120px">
                <span class="color333 font16">{{item.pointsCashInNum}}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>


    </el-form>

    <!-- 取消 确定按钮 -->
    <div class="t_c">
      <el-button type="primary" size="small" @click="handleClose()">取消</el-button>
      <el-button size="small" @click="handleClose()" type="primary">确定</el-button>
    </div>

  </div>
</template>

<script>
import {eventList, levelList, activeStatus, channelStatus, pointsExchangeContents, getEventCodeListByType, checkRemoveJsonProperties } from '../event/crmEventSelection'
import { formatDate2 } from "@/utils/datetime";
// 自动化营销-----事件选择组件
export default {
  name: 'eventSelectionInfo',
  components: {

  },

  props: {
    journeyId: {
      type: String,
      default: '',
    },
    id:Number,
    nodeInfo: {
      type: Object,
    }
  },

  data() {
    return {
      //旅程开始结束时间
      tripStart: null,
      tripEnd: '2037-06-26 10:10:20',
      //保存当前校验表单值
      currentNodeForm: {},
      currentNodeIndex: null,
      loadPromsing: false,
      // 表单数据
      ruleForm: {
        eventType: null,
        eventCode: null,
      },
      eventList: eventList,
      eventCodeList: [],               // 具体事件下拉数据，根据选择的事件类型来确定
      // 升级级数数据
      levelList: levelList,
      // 升降级所有表单数据
      formDataList: this.getDefalutItemFrom(),
      // 优惠券（红包）活动状态下拉框数据
      activeStatus: [],
      // 核销渠道数据
      channelStatus: channelStatus,
      //积分兑换内容
      pointsExchangeContents: pointsExchangeContents,
      tripInfo: {},
      poupons:[],
    }
  },

  methods: {
    //节点配置表单初始化
    getDefalutItemFrom(){
      return [
        {
          eventName: null,                    // 事件条件
          eventRangeTime: [],                         // 时间条件
          memberNum: null,                 // 会员事件-级别数
          promCode: null,         // 优惠券红包核销事件-优惠券红包活动code
          promName: null,         // 优惠券红包核销事件-优惠券红包活动name
          verificationChannels: null,         // 优惠券红包核销事件-优惠券红包活动核销渠道
          pointsExchangeContent: null,         // 积分兑换内容
          pointsExchangeNum: null,          // 积分兑换次数

          pointsCashInAmount:{
            f: null,
            s: null
          },
          pointsCashInNum: null,
        }
      ];
    },

    getEventTypeName(eventType){
      let item = eventList.find(function (item, index) {
        return item.type == eventType;
      })
      return typeof(item)=="undefined" ? "" : item.tagName;
    },

    getEventName(eventCode){
       let item =  this.eventCodeList.find(function (item, index) {
         return item.id == eventCode;
       })
       return typeof(item)=="undefined" ? "" : item.tagName;
    },

    getEventRangeTime(eventRangeTime){
      let eventRangeTimeDesc = '';
      if(eventRangeTime){
        if(eventRangeTime[0]){
          eventRangeTimeDesc = formatDate2(new Date(eventRangeTime[0])) + "~" + formatDate2(new Date(eventRangeTime[1]))
        }

      }
      return eventRangeTimeDesc;
    },

    getPromName(promCode){
      let item = this.poupons.find(function (item, index) {
        return item.promotionId == promCode
      })
      return typeof(item)=="undefined" ? "" : item.promName ;
    },


    getMemberNum(memberNum){
      let item = levelList.find(function (item, index) {
        return item.id == memberNum;
      })
      return typeof(item)=="undefined" ? "" : item.tagName;
    },

    getVerificationChannels(verificationChannels){
      let item = channelStatus.find(function (item, index) {
        return item.id == verificationChannels;
      })
      return typeof(item)=="undefined" ? "" : item.tagName;
    },

    getPointsExchangeContent(pointsExchangeContent){
      let item = pointsExchangeContents.find(function (item, index) {
        return item.code == pointsExchangeContent;
      })
      return typeof(item)=="undefined" ? "" : item.tagName;
    },


    //获取节点详情
    getBranchNodeDetail(){
      let this_ = this;
      let callback = function(res) {
        if (res.code == "0000") {
          this_.ruleForm.eventType = res.data.eventType == 0 ? null : res.data.eventType;
          this_.eventCodeList = getEventCodeListByType(this_.ruleForm.eventType);
          this_.ruleForm.eventCode =  res.data.eventCode == 0 ? null : res.data.eventCode;
          let nodeVariable = JSON.parse(res.data.nodeVariable);
          if(nodeVariable){
            this_.formDataList = nodeVariable.map((ele, index) => {
              let itemForm = JSON.parse(JSON.stringify(ele));
              itemForm.eventRangeTime = [];
              if(ele.eventRangeTime){
                itemForm.eventRangeTime[0] = ele.eventRangeTime.f;
                itemForm.eventRangeTime[1] = ele.eventRangeTime.s;
              }

              let callback = function(res1) {
                this_.poupons.push(res1.data);
              };

              if(itemForm.promCode){
                this_.utils.request.couponQueryConfigByPromotionId({"promotionId": itemForm.promCode}, callback)
              }
              return itemForm;
            });
          }
        }
      };
      let param = {"branchNodeId": this.nodeInfo.nodeId};
      this.utils.request.getBranchNodeDetail(param, callback);
    },

    //子关闭 标签选择弹框
    handleClose() {
      this.$emit("handleClose", false);
    },


    //获取优惠券红包列表
    getCouponList(){
      let this_ = this;
      let callback = function(res) {
        if (res.code == "0000") {
          this_.activeStatus = res.data.rows;
        } else {
          //alert("修改失败");
        }
      };
      if(this.ruleForm.eventCode){
        let promType = this.ruleForm.eventCode == 'coupons_verification' ?  11 : 12;
        let param = {
          promType: promType,
          limit: 1000000,
          start: 1,
        };
        this.utils.request.getCouponList(param, callback);
      }
    },
  },

  created(){

  },

  mounted() {
    this.getBranchNodeDetail();
  },
}
</script>
<style lang="scss" scoped>
  .desc{
    color: #ffb100;
    font-size: 10px;
    margin-top: 10px;
  }

  /deep/ .el-form-item__error{
    width: 500px;
  }

  .inLine{
    margin-top: 5px;
  }

  .redColor{
    color:#F00;
    height: 18px;
    line-height: 24px;
    display: inline-block;
    vertical-align: middle;
  }
  .value {
    display: inline-block;
    vertical-align: middle;
    height: 18px;
    line-height: 18px;
  }

  .wrap {
    padding: 0 30px;
    text-align:center;
    /* 表单样式 */ 
    .form-wrap {
      overflow: hidden;
      width: 100%;
      padding: 20px 0;
      .lebel {
        float: left;
        text-align: right;
        font-size: 16px;
      }
      .form {
        float: left;
        border: 1px solid #DCDFE6 !important;
        padding: 0 20px 20px 20px;
        margin-left: 2px;
        width: 80%;
      }
      .commonForm {
        position: relative;
        .delete {
          position: absolute;
          right: 0;
          top: 0;
          font-size: 22px;
          cursor: pointer;
          z-index: 999;
        }
      }
      .addForm {
        color: green;
      }
    }
  }

  /* 特殊样式部分 */ 
  .special /deep/ .el-form-item__content {
    height: 32px;
    line-height: 32px;
    margin-left: 0px !important;
  }
</style>

